<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<script src="js/vue.min.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="books.length">
			</div>
			<h2 v-else="books.length">购物车为空</h2>
		<table>
			<thead>
				<tr>
					<th></th>
					<th>全选</th>
					<th>图片</th>
					<th>名称</th>
					<th>单价</th>
					
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item,index) in books">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price | showPrice}}</td>
					<td>
						<button @click="decrement(index)" v-bind:disabled="item.count<=0">-</button>
						{{item.count}}
						<button @click="increment(index)">+</button>
					</td>
					<td>
						<button @click="removeHandle(index)">移除</button>
					</td>
				</tr>
			</tbody>
		</table>
		<button type="button" value="alert" onclick="alert('123!')">123</button>
		<h2>总价格: {{totalPrice | showPrice}}</h2>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					id:0,
					name:'',
					price:0,
					count:0,
					books:[
						{id:1,name:"sd",price:99,count: 2},
						{id:2,name:"dsf",price:128,count: 3},
						{id:3,name:"sdf",price:218,count: 8},
						{id:4,name:"sdfds",price:328,count: 4},
						]
						
				},
				methods:{
					
					increment(index){
						this.books[index].count++;
					},
					decrement(index){
					this.books[index].count--;
				},
				removeHandle(index){
					this.books.splice(index,1)
					for(let i=0;i<this.books.length;i++){
						this.books[i].id=i+1
					}
					}
				},
				
				filters:{
					showPrice(price){
						return "￥"+price.toFixed(2)
					}
				},
				computed:{
					totalPrice(){
						let totalPrice=0
						for(let i=0;i<this.books.length;i++){
							totalPrice+=this.books[i].price*this.books[i].count
						}
						return totalPrice
					}
				}
			})
		</script>
	</body>
</html>
